<template>
	<view>
		<view class="install-container" style="margin-bottom: 30rpx;">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="姓名：" name="姓名">
					<input maxlength="50" v-model="params['姓名']" placeholder="请输入住户姓名" @input="binddata('姓名',$event.detail.value)">
				</uni-forms-item>
				<!-- 	<uni-forms-item required name="status" label="经营状态：">
					<uni-data-checkbox v-model="resident.status" :localdata="status"></uni-data-checkbox>
				</uni-forms-item> -->
				<uni-forms-item required label="与户主关系：" name="户主关系">
					<view :class="label == '请选择与户主关系' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('户主关系',$event)" v-model="params['户主关系']"
					 mode="selector" :list="residentTypeList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required label="证件类型：" name="证件类型">
					<view :class="label6 == '请选择证件类型' ? 'color':''" class="tap" @click="handleTap('picker6')">{{label6}}</view>
					<lb-picker ref="picker6" @click="handleTap('picker6')" @input="binddata('证件类型',$event)" v-model="params['证件类型']"
					 mode="selector" :list="cardTypeList" :dataset="{ name: 'label6' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required label="证件编号：" name="证件编号">
					<input maxlength="18" v-model="params['证件编号']" placeholder="请输入证件编号" @input="binddata('证件编号',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="联系电话：" name="手机号">
					<input type="number" maxlength="50" v-model="params['手机号']" placeholder="请输入联系电话" @input="binddata('手机号',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="管理类型：" name="管理类型">
					<uni-data-checkbox v-model="params['管理类型']" :localdata="type"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="人户状态：" name="人户状态">
					<view :class="label1 == '请选择人户状态' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
					<lb-picker ref="picker1" @click="handleTap('picker1')"  v-model="params['入户状态']"
					 mode="selector" :list="occupancyStateList" :dataset="{ name: 'label1' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="户籍地：" name="籍贯">
					<input maxlength="50" v-model="params['籍贯']" placeholder="请输入户籍地">
				</uni-forms-item>
				<!-- <uni-forms-item required label="参保类型：" name="carNo">
					<input maxlength="50" v-model="params['参保类型']" placeholder="请输入设施编号" @input="binddata('carNo',$event.detail.value)" v-model='resident.carNo'>
				</uni-forms-item> -->
				<uni-forms-item label="参保类型：" name="参保类型">
					<view :class="label5 == '请选择参保类型' ? 'color':''" class="tap" @click="handleTap('picker5')">{{label5}}</view>
					<lb-picker ref="picker5" @click="handleTap('picker5')"  v-model="params['参保类型']"
					 mode="selector" :list="insureType" :dataset="{ name: 'label5' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required v-show="params['户主关系'] === 4" label="是否有暂住证：" name="暂住证">
					<uni-data-checkbox v-model="params['暂住证']" :localdata="residentStatus"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item v-show="params['户主关系'] === 4" label="租用起始日期：" name="入住时间">
					<date-picker v-model="params['入住时间']" placeHolder="请填写租用起始日期" @input="binddata('入住时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item v-show="params['户主关系'] === 4" label="租用结束日期：" name="离开时间">
					<date-picker v-model="params['离开时间']" placeHolder="请填写租用结束日期" @input="binddata('离开时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="政治面貌：" name="政治面貌">
					<view :class="label2 == '请选择政治面貌' ? 'color':''" class="tap" @click="handleTap('picker2')">{{label2}}</view>
					<lb-picker ref="picker2" @click="handleTap('picker2')"  v-model="params['政治面貌']" mode="selector" :list="politicTypeList"
					 :dataset="{ name: 'label2' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<!-- <uni-forms-item label="性别：" name="性别">
					<uni-data-checkbox v-model="params['性别']" :localdata="gender"></uni-data-checkbox>
				</uni-forms-item> -->
				<uni-forms-item label="民族：" name="民族">
					<input maxlength="50" v-model="params['民族']" placeholder="请输入民族">
				</uni-forms-item>
				<uni-forms-item label="学历：" name="学历">
					<view :class="label3 == '请选择学历' ? 'color':''" class="tap" @click="handleTap('picker3')">{{label3}}</view>
					<lb-picker ref="picker3" @click="handleTap('picker3')" v-model="params['学历']" mode="selector" :list="educationList"
					 :dataset="{ name: 'label3' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="婚姻状况：" name="婚姻状况">
					<view :class="label4 == '请选择婚姻状况' ? 'color':''" class="tap" @click="handleTap('picker4')">{{label4}}</view>
					<lb-picker ref="picker4" @click="handleTap('picker4')" v-model="params['婚姻状况']" mode="selector" :list="marrigeList"
					 :dataset="{ name: 'label4' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="工作单位：" name="工作单位">
					<input maxlength="50" v-model="params['工作单位']" placeholder="请输入工作单位">
				</uni-forms-item>
				<uni-forms-item label="特殊人群：" name="特殊人群">
					<uni-data-checkbox v-model="params['特殊人群']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="特殊人群描述：" name="特殊人群描述">
					<input maxlength="50" v-model="params['特殊人群描述']" placeholder="请描述...">
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker
		},
		data() {
			return {
				originId: null,
				residentId: null,
				label: '请选择与户主关系',
				label1: '请选择人户状态',
				label2: '请选择政治面貌',
				label3: '请选择学历',
				label4: '请选择婚姻状况',
				label5: '请选择参保类型',
				label6: '请选择证件类型',
				installTypeList: this.$type.installTypeList,
				residentTypeList: this.$type.residentTypeList,
				occupancyStateList: this.$type.occupancyStateList,
				politicTypeList: this.$type.politicTypeList,
				marrigeList: this.$type.marrigeList,
				educationList: this.$type.educationList,
				insureType: this.$type.insureType,
				residentTypeObj: this.$type.residentTypeObj,
				occupancyStateObj: this.$type.occupancyStateObj,
				politicTypeObj: this.$type.politicTypeObj,
				marrigeObj: this.$type.marrigeObj,
				educationObj: this.$type.educationObj,
				insureTypeObj: this.$type.insureTypeObj,
				cardTypeList: this.$type.cardTypeList,
				cardTypeObj: this.$type.cardTypeObj,
				params: {
					检查点id: null,
					姓名: null,
					证件类型: null,
					证件编号: null,
					手机号: null,
					户主关系: null,
					学历: null,
					籍贯: null,
					性别: null,
					年龄: null,
					政治面貌: null,
					婚姻状况: null,
					工作单位: null,
					参保类型: null,
					人户状态: null,
					管理类型: null,
					特殊人群: null,
					特殊人群描述: null,
					备注: null,
					暂住证: null,
					入住时间: null,
					离开时间: null,
					房屋: [],
					来源检查点id: null
				},
				type: [{
						text: '常住',
						value: 2
					},
					{
						text: '流动',
						value: 1
					}
				],
				gender: [{
						text: '男',
						value: 1
					},
					{
						text: '女',
						value: 2
					}
				],
				status: [{
						text: '是',
						value: 1
					},
					{
						text: '否',
						value: 2
					}
				],
				residentStatus: [{
						text: '是',
						value: 2
					},
					{
						text: '否',
						value: 1
					}
				],
				//表单验证规则
				rules: {
					姓名: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名'
						}]
					},
					户主关系: {
						rules: [{
							required: true,
							errorMessage: '请选择与户主关系'
						}]
					},
					证件类型: {
						rules: [{
							required: true,
							errorMessage: '请填写证件类型'
						}]
					},
					证件编号: {
						rules: [{
							required: true,
							errorMessage: '请填写证件编号'
						}]
					},
					// 证件编号: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写证件编号'
					// 	}, {
					// 		pattern: /^[1-9]\d{5}(((1[89]|20)\d{2}(((0[13578]|1[0-2])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8]))))|((((1[89]|20)(0[48]|[2468][048]|[13579][26]))|((19|20)00))0229))\d{3}(\d|X|x)$/,
					// 		errorMessage: '身份证号码格式不正确',
					// 	}]
					// },
					手机号: {
						rules: [{
							required: true,
							errorMessage: '请填写联系电话'
						}]
					},
					管理类型: {
						rules: [{
							required: true,
							errorMessage: '请选择管理类型'
						}]
					},
					// 政治面貌: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写政治面貌'
					// 	}]
					// },
					暂住证: {
						rules: [{
							validateFunction: (rule, value, data, callback) => {
								if (value || this.params.户主关系 !== 4) {
									// 通过返回 resolve
									callback()
								} else {
									// 不通过返回 reject(new Error('错误信息'))
									callback('请选择是否有暂住证')
								}
							}
						}]
					},
					// 入住时间: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			console.log(value)
					// 			if (value || this.params.户主关系 !== 4) {
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请填写租用起始时间')
					// 			}
					// 		}
					// 	}]
					// },
					// 离开时间: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			if (value || this.params.户主关系 !== 4) {
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请填写租用结束时间')
					// 			}
					// 		}
					// 	}]
					// }
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.房屋 = [+options.roomId]
			this.params.检查点id = +options.checkId
			this.originId = +options.originId
			uni.setStorageSync('checkId', +options.checkId)
			this.residentId = +options.residentId
			if (this.residentId) {
				this.getResidentInfo()
			}
		},
		methods: {
			getResidentInfo() {
				this.$http.post('gridSystem/resident/info', {
					用户id: this.residentId
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						res.data.入住时间 = res.data.入住时间 && dayjs(res.data.入住时间).format('YYYY-MM-DD')
						res.data.离开时间 = res.data.离开时间 && dayjs(res.data.离开时间).format('YYYY-MM-DD')
						this.params = res.data
						this.label = this.residentTypeObj[res.data.户主关系]
						this.label1 = this.occupancyStateObj[res.data.人户状态]
						this.label2 = this.politicTypeObj[res.data.政治面貌]
						this.label3 = this.educationObj[res.data.学历]
						this.label4 = this.marrigeObj[res.data.婚姻状况]
						this.label5 = this.insureTypeObj[res.data.参保类型]
						this.label6 = this.cardTypeObj[res.data.证件类型]
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			// 户主关系
			handleConfirm(e) {
				// console.log(this.params.户主关系)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					switch(name) {
						case 'label':
							this.params.户主关系 = e.item.id
							break
						case 'label1':
							this.params.人户状态 = e.item.id
							break
						case 'label2':
							this.params.政治面貌 = e.item.id
							break
						case 'label3':
							this.params.学历 = e.item.id
							break
						case 'label4':
							this.params.婚姻状况 = e.item.id
							break
						case 'label5':
							this.params.参保类型 = e.item.id
							break
						case 'label6':
							this.params.证件类型 = e.item.id
							break
					}
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					this.params.来源检查点id = this.originId
					if(!this.params.检查点id) {
						this.params.检查点id = uni.getStorageSync('checkId')
					}
					if(this.params.证件类型 === 1 && !(/^[1-9]\d{5}(((1[89]|20)\d{2}(((0[13578]|1[0-2])(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)(0[1-9]|[12][0-9]|30))|(02(0[1-9]|[1][0-9]|2[0-8]))))|((((1[89]|20)(0[48]|[2468][048]|[13579][26]))|((19|20)00))0229))\d{3}(\d|X|x)$/.test(this.params.证件编号))) {
						uni.showToast({
							icon: 'none',
							title: '身份证格式不正确'
						})
						return
					} 
					// if (!this.resident.picture) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "请上传正面照片"
					// 	})
					// 	return
					// }
					res.入住时间 = res.入住时间 && dayjs(res.入住时间).format('YYYY-MM-DDTHH:mm:ssZ')
					res.离开时间 = res.入住时间 && dayjs(res.离开时间).format('YYYY-MM-DDTHH:mm:ssZ')
					if(res.入住时间 && res.离开时间) {
						let startTime = new Date(dayjs(res.入住时间).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.离开时间).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '租用结束日期不得早于起始日期',
								icon: 'none'
							})
							return
						}
					}
					// res.年龄 = res.年龄 && parseInt(res.年龄)
					console.log('表单数据信息：', res);
					if (this.residentId) {
						// this.params.来源检查点id = this.originId
						this.editResident(Object.assign({}, this.params, res))
						return
					}
					this.createResident(Object.assign({}, this.params, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			createResident(params) {
				this.$http.post('gridSystem/resident/create', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.navigateBack({
							delta: 1
						})
						uni.showToast({
							title: '新增成功'
						})
					} else if (res.code === 50010) {
						uni.showToast({
							title: '添加失败,当前房屋已有户主',
							icon: 'none'
						})
					}
				})
			},
			editResident(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/resident/update', params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.showToast({
							title: '修改成功'
						})
					}else if (res.code === 50010) {
						uni.showToast({
							title: '修改失败,当前房屋已有户主',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}
</style>
